import { Input, NavBar, TextArea } from "antd-mobile";
import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
type Props = {
  onClose: () => void;
  value: string;
  type: "" | "name" | "intro";
  onUpdateProfile: (type: "name" | "intro", value: string) => void;
  onUpdateName: (value: string, name: string) => void;
};
function EditInput({
  onClose,
  value,
  onUpdateName,
  onUpdateProfile,
  type,
}: Props) {
  const isName = type === "name";
  const [inputValue, setInputValue] = useState(value);
  const onSave = () => {
    onUpdateName(inputValue, "");
    if (type === "") return;
    onUpdateProfile(type, inputValue);
  };
  const handleInputChange = (val: string) => {
    setInputValue(val); // Update inputValue with input value
    console.log(val);
  };
  useEffect(() => {
    setInputValue(value ?? "");
  }, [value]);
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        right={
          <span className="commit-btn" onClick={onSave}>
            提交
          </span>
        }
      >
        编辑{isName ? "昵称" : "简介"}
      </NavBar>
      <div className="edit-input-content">
        <h3>{isName ? "昵称" : "简历"}</h3>
        {isName ? (
          <div className="input-wrap">
            <Input
              placeholder="请输入"
              value={inputValue}
              onChange={setInputValue}
            />
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入"
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            value={inputValue}
            onChange={setInputValue}
          />
        )}
      </div>
      <Input
        placeholder="请输入"
        value={inputValue}
        onChange={handleInputChange}
      />
    </div>
  );
}

export default EditInput;
